<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" :rules="rules" size="mini" label-width="">
            <el-form-item label="指定上传服务器" prop="server">
                <el-select v-model="form.serverId" filterable clearable placeholder="请选择服务器">
                    <el-option v-for="item in servers" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板类型" prop="tempType">
                <el-select v-model="form.tempType" filterable placeholder="请选择模板类型">
                    <el-option v-for="item in tempTypes" :key="item.VALUE" :label="item.NAME"
                               :value="item.VALUE"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-upload
                class="upload-excel"
                ref="upload"
                action="zte-report/tempUpload/uploadExcel"
                accept=".xls"
                :limit="1"
                :on-exceed="handleExceed"
                :before-upload="beforeAvatarUpload"
                :on-error="handleError"
                :on-success="handleSuccess"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload()">上传到服务器
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls文件</div>
        </el-upload>
    </div>

</template>

<script>
    import {getServers} from '@/api/reportDownload'
    import {ListSysDict} from '@/api/reportData'
    import {insertTempUpload} from '@/api/tempUploadLog'

    export default {
        name: "UploadComponent",
        props: {},
        data() {
            return {
                form: {},
                servers: [],
                tempTypes:[],
                actionUrl: '',
                rules: {
                    server: [
                        {required: true, message: '请选择服务器', trigger: 'blur'}
                    ],
                    tempType: [
                        {required: true, message: '请选择模板类型', trigger: 'blur'}
                    ]
                }
            }
        },
        created: function () {
            this.getServers();
            this.getTempType();
        },
        mounted: function () {

        },
        methods: {
            async getServers() {
                let reply = await getServers();
                this.servers = reply;
            },
            async getTempType() {
                let params = {
                    type: 'dict',
                    dictCode: "TEMP_TYPE"
                };
                let reply = await ListSysDict(params);
                this.tempTypes = reply;
            },
            //验证上传文件的个数
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },

            //验证是否选择上传服务器,此方法在上传之前执行，在这里对上传地址进行处理，添加服务器参数
            beforeAvatarUpload(file) {
                if (this.form.serverId && this.form.tempType) {

                } else {
                    this.$notify.error({
                        title: '请选择服务器或者模板类型',
                        message: '请选择服务器或者模板类型'
                    })
                    return false;
                }
            },

            //上传失败时的事件
            handleError(err, file, fileList) {
                this.$message.warning(err);
                this.$refs.upload.clearFiles();
            },
            //上传成功
            handleSuccess(response, file, fileList) {
                if (response.code == 200) {
                    this.insertTemp(response.msg);
                }
                this.$refs.upload.clearFiles();

                //this.editMidTableByUpLoadPath();
            },
            async insertTemp(fileName) {
                let params = {
                    fileName : fileName,
                    serverId : this.form.serverId,
                    tempType : this.form.tempType
                }
                let reply = await insertTempUpload(params);
                if (reply.code == 200) {
                    this.$notify.success({
                        title: '',
                        message: '上传成功'
                    })
                }else {
                    this.$notify.error({
                        title: '',
                        message: '上传失败'
                    })
                }
            },

            //点击提交，上传文件
            submitUpload() {
                //this.actionUrl = 'zte-report/tempUpload/uploadExcel?serverId=' + this.form.serverId+'&tempType='+this.form.tempType+'&s='+Math.random();
               this.$refs.upload.submit();
            },
            //文件列表移除文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //点击文件列表中已上传的文件
            handlePreview(file) {
                console.log(file);
            },

            //上传文件后的保存事件
/*            async editMidTableByUpLoadPath() {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = {
                    headers: this.previewReportPops.tableHeader,
                    upLoadPath: this.upLoadPath,
                    tableName: this.queryReportPops.tableSql,
                    title: this.titleData

                }
                console.log(params);
                let repays = await editMidTableByUpLoadPath(params);
                loading.close();
                if (repays.code == 500) {
                    this.$notify.error({
                        title: '修改失败',
                        message: repays.msg
                    })
                } else {
                    this.editMidData = '1';
                    this.queryMidTable();
                    this.$notify.success({
                        title: '',
                        message: '修改成功'
                    })
                }
            },*/
        }
    }
</script>

<style scoped>

</style>